<template>
    <div>
        <div class="container" style="margin-bottom: 20px;">
            <el-tag  class="tag-header" :class="selectTag==1?'active':''" @click="selectClick(1)">总览</el-tag>
            <!--<el-tag  class="tag-header" :class="selectTag==2?'active':''" @click="selectClick(2)">能源成本</el-tag>-->
            <el-tag  class="tag-header" :class="selectTag==3?'active':''" @click="selectClick(3)">电</el-tag>
            <el-tag  class="tag-header" :class="selectTag==4?'active':''" @click="selectClick(4)">水</el-tag>
            <el-tag  class="tag-header" :class="selectTag==5?'active':''" @click="selectClick(5)">气</el-tag>
            <el-tag  class="tag-header" :class="selectTag==6?'active':''" @click="selectClick(6)">集中供热量</el-tag>
            <el-tag  class="tag-header" :class="selectTag==7?'active':''" @click="selectClick(7)">集中供冷量</el-tag>
        </div>

    <div class="container">

        <div v-show="selectTag==1">
            <div class="energy-table">
                <div class="table-title">耗能总览</div>
                <div class="table-box">
                    <template>
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="imgUrl"
                                    label="图标"
                                    width="180">
                                <template slot-scope="scope">
                                    <i>
                                        <img :src="require('../../../assets/img/EIcons/'+scope.row.imgUrl)" alt="" style="width: 13px;height: 13px;">
                                        <!--<img :src="'../../../assets/img/EIcons/'+scope.row.imgUrl" alt="">-->
                                    </i>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="energyType"
                                    label="类型"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="totalVal"
                                    :formatter="formatUnit"
                                    label="能耗量">
                            </el-table-column>
                            <el-table-column
                                    prop="standCoal"
                                    label="标煤量">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>

            </div>
            <div class="energy-table">
                <div class="table-title">耗能总览</div>
                <div class="table-box">
                    <div id="table-chart1" ref="chart1" style="width:65.5%; height:500px;float:left;border:1px solid #ddd;marginTop:15px;padding:10px"></div>
                    <div id="table-chart2" ref="chart2" style="width:29.5%; height:500px;float:right;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                </div>

            </div>
        </div>
        <div v-show="selectTag==2">
            <div class="energy-table">
                <div class="table-title">成本趋势分析图</div>
                <div class="table-box">
                    <div id="table-chart3" ref="chart3" style="width:100%;height:500px;marginTop:15px;padding:10px;"></div>
                </div>

            </div>
            <div class="energy-table">
                <div class="table-title">成本比例分析</div>
                <div class="table-box">
                    <div id="table-chart4" ref="chart4" style="width:47.5%;height:500px;float:left;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                    <div id="table-chart5" ref="chart5" style="width:47.5%;height:500px;float:right;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                </div>

            </div>
        </div>
        <div v-show="selectTag!=1&&selectTag!=2">
            <div class="energy-table">
                <div class="table-title">{{chartSameName}}</div>
                <div class="table-box">
                    <div id="table-chart6" ref="chart6" style="width:100%;height:500px;float:left;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                    <!--<div id="table-chart7" ref="chart7" style="width:27.5%;height:500px;float:right;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>-->
                </div>

            </div>
        </div>

    </div>
    </div>
</template>

<script>

    import {getCalTotalEnergy} from  '../../../api/index';
    export default {
        name: "energy-summary",
        data(){
            return {
                selectTag:1,
                typeName:0,
                chartSameName:'电能耗总览趋势图',
                tableData: [],
                chartData1:{},
                chartData2:{},
                chartData6:'',
            }
        },
        mounted(){
            this.getCalTotalEnergy();
        },
        methods: {
            formatUnit(row, column, cellValue, index){
                return cellValue +" "+ row.unit;
            },
            getCalTotalEnergy(){
                getCalTotalEnergy({
                    typeName:this.typeName
                }).then((res)=>{
                    console.log(res)
                    if(this.typeName<1){
                        this.tableData = res.list;
                        this.chartData1["x"] = res.dataX.data;
                        this.chartData1["y"] = {};
                        this.chartData1["y"]["y1"] = res.dataY1;
                        this.chartData1["y"]["y2"] = res.dataY2;
                        this.chartData1["y"]["y3"] = res.dataY3;
                        this.chartData1["y"]["y4"] = res.dataY4;
                        this.chartData1["y"]["y5"] = res.dataY5;

                        this.chartData2["data"] = [];
                        this.chartData2["val"] = res.BarY;
                        for(var i=0;i<res.BarY.length;i++){
                            this.chartData2["data"].push(res.BarY[i].name)
                        }

                        this.eharts1Init();
                        this.eharts2Init();
                    }
                    if(this.typeName >= 1){
                        this.chartData6 = res;
                        this.eharts6Init();
                    }

                })
            },
            eharts1Init() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart1 = this.$echarts.init(document.getElementById('table-chart1'))
                var div1 = this.$refs.chart1;
                // var myChart1 = this.$echarts.init(div1)
                    var $_this1 = this;
                var dataVal = [];
                for(var i = 0;i<$_this1.chartData1.x.length;i++){
                    dataVal.push($_this1.chartData1.y["y"+(i+1)].data[0])
                }
                    // 绘制图表
                    var option1 = {
                        title: {
                            text: new Date().getFullYear()+'年标煤统计',
                            subtext: '统计时间'+new Date().getFullYear()
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['标煤量']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            top: 'middle',
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: $_this1.chartData1.x,//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel:{
                                    formatter:function(val,index){
                                        return parseFloat(val/10000).toFixed(2) +' w'+$_this1.chartData1.y.y1.unit;
                                    }
                                }
                            }
                        ],
                        dataZoom: [
                            {
                                show: true,
                                start: 0,
                                end: 100
                            },
                            {
                                type: 'inside',
                                start: 0,
                                end: 100
                            }
                        ],
                        series:[
                            {
                                name:"" ,
                                type: 'bar',
                                data: dataVal,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };

                    myChart1.setOption(option1);

                },
            eharts2Init() {
                    var div2 = this.$refs.chart2;
                var myChart2 = this.$echarts.init(document.getElementById('table-chart2'))
                    // var myChart2 = this.$echarts.init(div2)//
                var $_this2 = this;
                    var option2 = {
                        title: {
                            text: new Date().getFullYear()+'标煤比例分析',
                            // subtext: '纯属虚构',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: $_this2.chartData2.data
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            top: 'middle',
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: '占比',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: $_this2.chartData2.val,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart2.setOption(option2);
                },
            eharts3Init() {
                var div3 = this.$refs.chart3;
                var myChart3 = this.$echarts.init(document.getElementById('table-chart3'))
                // var myChart3 = this.$echarts.init(div3)//
                var option3 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data:['蒸发量','降水量','平均温度']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '水量',
                            min: 0,
                            max: 250,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: '温度',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 30,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    series: [
                        {
                            name:'蒸发量',
                            type:'bar',
                            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
                        {
                            name:'降水量',
                            type:'bar',
                            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        },
                        {
                            name:'平均温度',
                            type:'line',
                            yAxisIndex: 1,
                            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                };
                myChart3.setOption(option3);
            },
            eharts4Init() {
                var div4 = this.$refs.chart4;
                var myChart4 = this.$echarts.init(document.getElementById('table-chart4'))
                // var myChart4 = this.$echarts.init(div4)//
                var option4 = {
                    title: {
                        text: '总能耗图',
                        // subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['用电', '用水', '温度', '湿度', '用气']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '用电'},
                                {value: 310, name: '用水'},
                                {value: 234, name: '温度'},
                                {value: 135, name: '湿度'},
                                {value: 1548, name: '用气'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart4.setOption(option4);
            },
            eharts5Init() {
                var div5 = this.$refs.chart5;
                var myChart5 = this.$echarts.init(document.getElementById('table-chart5'))
                // var myChart5 = this.$echarts.init(div5) //
                var option5 = {
                    title: {
                        text: '总能耗图',
                        // subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['用电', '用水', '温度', '湿度', '用气']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '用电'},
                                {value: 310, name: '用水'},
                                {value: 234, name: '温度'},
                                {value: 135, name: '湿度'},
                                {value: 1548, name: '用气'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart5.setOption(option5);
            },
            eharts6Init() {
                var $_this6 = this;
                console.log()
                // 基于准备好的dom，初始化echarts实例
                var div6 = this.$refs.chart6;
                var myChart6 = this.$echarts.init(document.getElementById('table-chart6'))
                // var myChart6 = this.$echarts.init(div6) //
                // 绘制图表
                var option6 = {
                    title: {
                        text: new Date().getFullYear()+$_this6.chartData6.dataY.txt,//'用电量和用水量',
                        subtext: '统计时间'+new Date().getFullYear()//'纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        // data: ['用电量', '用水量']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: $_this6.chartData6.dataX.data2//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{
                                formatter:function(val,index){
                                    return val +' '+$_this6.chartData6.dataY.unit;
                                }
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            // name: '用电量',
                            type: 'bar',
                            data: $_this6.chartData6.dataY.data,//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };

                myChart6.setOption(option6);

            },
            eharts7Init() {
                var div7 = this.$refs.chart7;
                var myChart7 = this.$echarts.init(document.getElementById('table-chart7'))
                // var myChart7 = this.$echarts.init(div7) //
                var option7 = {
                    title: {
                        text: '总能耗图',
                        // subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['用电', '用水', '温度', '湿度', '用气']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '用电'},
                                {value: 310, name: '用水'},
                                {value: 234, name: '温度'},
                                {value: 135, name: '湿度'},
                                {value: 1548, name: '用气'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart7.setOption(option7);
            },
            selectClick(v){
                    this.selectTag = v;
                    var $_this = this;
                    switch (v){
                        case 1:
                            console.log(this)
                            this.typeName = this.selectTag-1;
                            this.getCalTotalEnergy();
                            this.$nextTick(function () {
                                this.eharts1Init();
                                this.eharts2Init();
                            })
                            break;
                        case 2:
                            this.$nextTick(function () {
                                this.eharts3Init();
                                this.eharts4Init();
                                this.eharts5Init();
                            })

                            break;
                        case 3:
                            this.typeName = this.selectTag-2;
                            this.getCalTotalEnergy();
                            this.chartSameName = '电能耗总览趋势图';
                            this.$nextTick(function () {
                                this.eharts6Init();
                                // this.eharts7Init();
                            })

                            break;
                        case 4:
                            this.typeName = this.selectTag-2;
                            this.getCalTotalEnergy();
                            this.chartSameName = '水能耗总览趋势图';
                            break;
                        case 5:
                            this.typeName = this.selectTag-2;
                            this.getCalTotalEnergy();
                            this.chartSameName = '气能耗总览趋势图';
                            break;
                        case 6:
                            this.typeName = this.selectTag-2;
                            this.getCalTotalEnergy();
                            this.chartSameName = '集中供热量总览趋势图';
                            break;
                        case 7:
                            this.typeName = this.selectTag-2;
                            this.getCalTotalEnergy();
                            this.chartSameName = '集中供冷量总览趋势图';
                            break;
                    }
            },
        }
    }
</script>

<style scoped>
    /deep/ .el-tag{
        margin-right: 25px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        background-color: #fff;
        border: 0;
        cursor: pointer;
    }
    .tag-header{
        color: #0FBBB5;
    }
    .tag-header.active{
        color: #fff;
        background-color: #0fbbb5;
    }
    .energy-table{
        margin-top: 30px;
        border: 1px solid #0fbbb5;
        overflow: hidden;
    }
    .table-title{
        padding: 15px 12px;
        background-color: #0fbbb5;
        color: #fff;
    }
    .table-box{
        padding: 12px;
        overflow: hidden;
    }
</style>